﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/m.master" %>
<script runat="server"></script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" href="../assets/css/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="../assets/css/plugins/bootstrap-year-calendar/bootstrap-year-calendar.min.css" />
<style type="text/css">
.system-box .right-side{width: 100%;}
#calendar{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#calendar .month-container{
	height: 220px;
}
#calendar .calendar-header{
	margin-bottom: 15px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" Runat="Server">
<div class="system-box">
	<div class="right-side">
		<div class="btns-container"></div>
		<article class="htmleaf-container">
			<div id="calendar"></div>
			<input type="hidden" id="nowYear" />
		</article>
	</div>
	
	<div class="modal modal-fade" id="event-modal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
	        		<h4 class="modal-title">节日设置</h4>
	      		</div>
	      		<div class="modal-body">
	        		<input type="hidden" name="event-index" value="">
	        		<form class="form-horizontal">
	          			<div class="form-group">
	            			<label for="min-date" class="col-sm-2 control-label">节日名称</label>
	            			<div class="col-sm-9">
	              				<input id="dateName" type="text" class="form-control">
	            			</div>
	          			</div>
	          			<div class="form-group">
	            			<label for="min-date" class="col-sm-2 control-label">日期区间</label>
	            			<div class="col-sm-9">
		              			<div class="input-group input-daterange" data-provide="datepicker">
		                			<input name="event-start-date" readonly="readonly" 
		                				type="text" class="form-control" data-date-format="yyyy-mm-dd" />
		                			<span class="input-group-addon">to</span>
		                			<input name="event-end-date" readonly="readonly" 
		                				type="text" class="form-control" data-date-format="yyyy-mm-dd" />
		              			</div>
	            			</div>
	          			</div>
	        		</form>
	      		</div>
	      		<div class="modal-footer">
	        		<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            		<button type="button" class="btn btn-danger" id="delete">删除</button>
	        		<button type="button" class="btn btn-primary" id="save">设置</button>
	      		</div>
	    	</div>
	  	</div>
	</div>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" Runat="Server">
<script src="../assets/js/page/rScroll.js"></script>
<script src="../assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>	
<script src="../assets/js/plugins/bootstrap-year-calendar/bootstrap-year-calendar.js"></script>
<script src="../assets/js/plugins/bootstrap-popover/bootstrap-popover.js"></script>
<script type="application/javascript">
var dayName = '';
var tempStartDate = [];
var tempEndDate = [];
//编辑事件
function editEvent(event) {
	var dataSource = $('#calendar').data('calendar').getDataSource();
	$('#delete').hide();
	for(var i in dataSource){
		if(!Y.checkNull(dataSource[i].startDate) && !Y.checkNull(dataSource[i].endDate)){
			if(dataSource[i].startDate.getTime()==event.startDate.getTime()&&dataSource[i].endDate.getTime()==event.endDate.getTime()) {
				//显示删除按钮
				$('#delete').show();
				break;
			}
		}
	}
	$('#event-modal input[name="event-index"]').val(event ? event.id : '');
	$('#dateName').val(event ? event.name : '');
	$('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
	$('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
	$('#event-modal').modal();
}
//删除事件
function deleteEvent(event) {
	tempStartDate = [];
	tempEndDate = [];
	var dataSource = $('#calendar').data('calendar').getDataSource();
	for(var i = dataSource.length-1;i>=0;i--) {
		if(!Y.checkNull(dataSource[i].startDate) && !Y.checkNull(dataSource[i].endDate)){
			if(dataSource[i].startDate.getTime()<=event.endDate.getTime()&&dataSource[i].endDate.getTime()>=event.startDate.getTime()) {
				tempStartDate.push(dataSource[i].startDate);
				tempEndDate.push(dataSource[i].endDate);
				dataSource.splice(i, 1);
			}
		}
	}
	$('#calendar').data('calendar').setDataSource(dataSource);
}
//保存事件
function saveEvent() {
	var startTime=$('#event-modal input[name="event-start-date"]').datepicker('getDate');
	var endTime=$('#event-modal input[name="event-end-date"]').datepicker('getDate');
	deleteEvent({ startDate: startTime, endDate: endTime });
	var event = {
		tempStartDate:tempStartDate.length==0 ? null: tempStartDate,
		tempEndDate:tempEndDate.length==0 ? null: tempEndDate,
		name: $('#dateName').val(),
		startDate: startTime,
		endDate: endTime,
//		color:'#ff0000',
	}
//	console.log('save',event.tempStartDate,'---------',event.tempEndDate);
	var dataSource = $('#calendar').data('calendar').getDataSource();
	dataSource.push(event);
			
//	console.log(event);
	setTimeout(function(){
		$('#calendar').data('calendar').setDataSource(dataSource);
		$('#event-modal').modal('hide');
	},100)
		    
}

//加载节日信息
function loadList(year){
	layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
	Y.API2('Calendar','GetFestivalList',{Year:year},function(data){
		layer.closeAll('dialog');
		if(data.Success == false){
			swal(data.Message, '', 'error');
		}else{
			var tempArr = [];
			data.map(function(item,i){
				var sd = item.StartDate.split('-');
				var ed = item.EndDate.split('-');
				var temp = {
					name: item.TypeName,
					startDate: new Date(sd[0],parseInt(sd[1]) - 1,sd[2]),
					endDate: new Date(ed[0],parseInt(ed[1]) - 1,ed[2]),
//					color:'#ff0000'
				};
				tempArr.push(temp);
			});
			$('#nowYear').val(year); 
			$('#calendar').data('calendar').setDataSource(tempArr);
		}
	})
}

$(document).ready(function(){
	//模块ID
	var ModuleID = Y.getUrlParam("ModuleID");
	//获取按钮
	commonUtil.loadBtnList(ModuleID,function(){
		rScroll();
	});
	
	var calendar = $('#calendar').calendar({
		dealYear:{c:'Calendar',a:'GetFestivalList'},
		enableContextMenu: true,
		enableRangeSelection: true,
		contextMenuItems:[{
			text: 'Update',
			click: editEvent
		},{
			text: 'Delete',
			click: deleteEvent
		}],
		selectRange: function(e) {
			editEvent({ startDate: e.startDate, endDate: e.endDate, name:dayName });
		},
		mouseOnDay: function(e) {
			dayName='';
			if(e.events.length > 0) {
				dayName=e.events[0].name;
				var content = '';
				for(var i in e.events) {
		        	content += 	'<div class="event-tooltip-content">'
		            		+ 		'<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
		            		+ 	'</div>';
				}
		            
				$(e.element).popover({ 
					trigger: 'manual',
					container: 'body',
					html:true,
					content: content
		        });
		                
		        $(e.element).popover('show');
			}
		},
		mouseOutDay: function(e) {
			if(e.events.length > 0) {
		    	$(e.element).popover('hide');
		    }
		},
		dayContextMenu: function(e) {
			$(e.element).popover('hide');
		},
		dataSource: []
	});
	
	//设置年限
	Y.API2('Calendar','GetMaxMinYear',{},function(data){
		if(data.Success == false){
			swal(data.Message,'','error');
		}else{
			$('#calendar').data('calendar').setMinDate(new Date((data.MinYear - 1) + '-12-31'));
			$('#calendar').data('calendar').setMaxDate(new Date(data.MaxYear + '-12-31'));
			loadList(new Date().getFullYear());
		}
	})
	//点击设置按钮
	$('#save').click(function() {
		if($('#dateName').val().trim() == '')
			return false;
		saveEvent();
	});
	//点击删除按钮
	$('#delete').click(function(){
		var ev = {
			startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
			endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
		}
		deleteEvent(ev);
		var event = {
			tempStartDate:ev.startDate.length==0 ? null: [ev.startDate],
			tempEndDate:ev.endDate.length==0 ? null: [ev.endDate],
			name: $('#dateName').val(),
			startDate: null,
			endDate: null,
		}
		var dataSource = $('#calendar').data('calendar').getDataSource();
		dataSource.push(event);
		$('.modal-header .close').click();
	});
	//保存按钮
	$('.btns-container').on('click','#btn-save',function(){
		var submitArr = [];
		var dataSource = $('#calendar').data('calendar').getDataSource();
		dataSource.map(function(item){
			var temp = {
//				HolidayYearv: item.startDate.getFullYear(),
				TypeName: item.name,
				StartDate: Y.checkNull(item.startDate) ? '' : (item.startDate.getFullYear() + '-' + (item.startDate.getMonth() + 1) + '-' + item.startDate.getDate()),
				EndDate: Y.checkNull(item.endDate) ? '' : (item.endDate.getFullYear() + '-' + (item.endDate.getMonth() + 1) + '-' + item.endDate.getDate()),
				OldStartDate: Y.checkNull(item.tempStartDate) ? '' : (item.tempStartDate[0].getFullYear() + '-' + (item.tempStartDate[0].getMonth() + 1) + '-' + item.tempStartDate[0].getDate()), 
				OldEndDate: Y.checkNull(item.tempEndDate) ? '' : (item.tempEndDate[0].getFullYear() + '-' + (item.tempEndDate[0].getMonth() + 1) + '-' + item.tempEndDate[0].getDate())
			}
			submitArr.push(temp);
		});
//		console.log(submitArr);
		layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
		Y.API2('Calendar', 'ModifyCalendar', { list: submitArr }, function (data) {
			layer.closeAll('dialog');
			loadList($('#calendar').data('calendar').getYear());
			if(data.Success == false){
				swal(data.Message, '', 'error');
			}else{
				swal('保存成功', '', 'success');
			}
		})
	})
});
</script>
</asp:Content>

